<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-page-header__content{
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <el-page-header style="background-color: #0095d7;
            color: white;line-height: 60px" @back="goBack" content="添加收获地址">
    </el-page-header>
    <el-card style="width: 600px;height: 800px;margin: 0 auto">
        <el-form label-width="80px">
            <el-form-item label="姓名">
                <el-input type="text" v-model="p.consignee"></el-input>
            </el-form-item>
            <el-form-item label="电话号">
                <el-input type="text" v-model="p.phone"></el-input>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-input type="text" v-model="p.location"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="add()">添加地址</el-button>
            </el-form-item>
        </el-form>
    </el-card>


</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                p:{
                    userId:'',
                    consignee:"",
                    phone:"",
                    location:""
                },
            }
        },
       methods:{
           add(){
             if (v.p.consignee==""){
                 v.$message.error("请输入您要收货人的名称!");
                 return;
             }
             if (v.p.phone==""){
                 v.$message.error("请输入您的电话号!");
                 return;
             }
             if (v.p.location==""){
                 v.$message.error("请输入收获地址!");
                 return;
             }
             //发出添加地址的请求

             axios.post("/address/add-new",v.p).then(function (response) {
                 v.$message.success("添加成功!");
                 location.href = "/admin.html?id="+v.p.userId;
             })
           },

           goBack(){
               history.back();//返回上一页面
           },
       },
       created:function () {
           if (location.search.indexOf("id") != -1) {//包含wd代表显示搜索结果
               //根据地址栏中的wd搜索内容发出请求获取所有相关地址
               let id = location.search.split('=')[1];
               this.p.userId = id;
           }
       }
    })
</script>
</html>